<template>
  <div class="header" :class="{site:!isHome}">
    <div class="header-layout" :class="{navHome:isHome,navOther:!isHome}">
      <div :class="{'left-logo':isHome,'left-logo-other':!isHome}">
        <img :src="require(`@/assets/imgs/${logoUrl}.png`)" alt style="height:40px" />
      </div>
      <div class="right-nav">
        <el-menu
          router
          :default-active="this.$route.path"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
        >
          <el-menu-item
            v-for="item in navList"
            :key="item.id"
            :index="item.name"
            :class="{itemtext:!isHome,hometext:isHome}"
          >{{ item.navItem }}</el-menu-item>
          <!-- <el-submenu index="5" class="aa1">
                <template slot="title" class="aa2">导览</template>
                <el-menu-item index="5-1">选项1</el-menu-item>
                <el-menu-item index="5-2">选项2</el-menu-item>
                <el-menu-item index="5-3">选项3</el-menu-item>
                
          </el-submenu>-->
        </el-menu>
        <div class="right-icon">
          <router-link :to="`${this.$store.state.terminal}/scienceEntry`">
            <i class="el-icon-search" :style="icon"></i>
          </router-link>
          <div class="icon-login" :style="icon" v-if="this.user_msg==''">
            <transition name="fade2">
              <p v-show="loginShow && !isLogin" @mouseleave="loginShow=false">
                <router-link :to="`${this.$store.state.terminal}/login`">
                  <span class="loginA" :class="{loginB:!isHome}">登录/</span>
                </router-link>
                <router-link :to="`${this.$store.state.terminal}/register`">
                  <span class="loginA" :class="{loginB:!isHome}">注册</span>
                </router-link>
              </p>
            </transition>
            <transition name="fade">
              <i
                v-show="isLogin || !loginShow"
                class="el-icon-s-custom"
                :class="{loginB:!isHome}"
                @mouseenter="loginShow=true"
              ></i>
            </transition>
          </div>
          <div class="icon-login" v-else>
            <div class="username-box" :class="{loginB:!isHome}">
              <div class="loginA" :class="{loginB:!isHome}">{{user_msg.username}}&nbsp;你好！</div>
              <div class="exit loginA" :class="{loginB:!isHome}" @click="exit">退出</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import pub from "../../../api/frx/js/public";
export default {
  data() {
    return {
      activeIndex1: "1",
      navList: [
        { id: 1, name: `${this.$store.state.terminal}/home`, navItem: "首页" },
        {
          id: 2,
          name: `${this.$store.state.terminal}/museum3`,
          navItem: "博物馆简介"
        },
        {
          id: 3,
          name: `${this.$store.state.terminal}/scienceEntry`,
          navItem: "词条"
        },
        {
          id: 4,
          name: `${this.$store.state.terminal}/news`,
          navItem: "新闻动态"
        },
        {
          id: 5,
          name: `${this.$store.state.terminal}/guidedPage`,
          navItem: "导览"
        },
        {
          id: 6,
          name: `${this.$store.state.terminal}/scienceAticle`,
          navItem: "用户"
        }
      ],
      isLogin: false, //是否登陆
      loginShow: false,
      isHome: "",
      icon: {},
      logoUrl: "logo",
      user_msg: ""
    };
  },
  watch: {
    $route: {
      handler: function(val, oldVal) {
        if (val.path == `${this.$store.state.terminal}/home`) {
          this.homeClass();
        } else {
          this.noHomeClass();
        }
      },
      // 深度观察监听
      deep: true
    }
  },
  created() {
    if (sessionStorage.getItem("userInfo")) {
      this.user_msg = JSON.parse(sessionStorage.getItem("userInfo"));
      console.log(this.user_msg);
    }
  },
  mounted() {
    if (this.$route.path == `${this.$store.state.terminal}/home`) {
      this.homeClass();
    } else {
      this.noHomeClass();
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      // if(key!=='1'){
      //   this.nvback={background: '#FBF8F1',position: 'relative','border-bottom': '2px solid #4f969c'}
      // }else{
      //   this.nvback={'background-image':'linear-gradient(to bottom, #454647a8, #fff0)'}
      // }
    },
    homeClass() {
      this.isHome = true;
      this.icon = { color: "#fff" };
      this.logoUrl = "logo";
    },
    noHomeClass() {
      this.isHome = false;
      this.icon = { color: "#6d7b7d" };
      this.logoUrl = "logobb";
    },
    exit() {
      sessionStorage.removeItem("userInfo");
      pub.http_post("user", "logout");

      this.user_msg = "";
      this.$message({
        message: "退出成功！",
        type: "success"
      });
    }
  }
};
</script>

<style lang='scss'>
.header .el-menu--horizontal > .el-menu-item {
  border: 0 !important;
  font-size: 1.025rem;
}
</style>

<style lang="scss" scoped>
//     background: #8ea8a9;
.fade-enter-active {
  transition: 0.5s;
}
.fade-enter {
  transform: translateX(15px);
  opacity: 0;
}
.fade2-enter-active {
  transition: 1s;
}
.fade2-enter {
  transform: translateX(-20px);
  opacity: 0;
}
.site {
  position: relative !important;
}
.header {
  position: absolute;
  z-index: 5;
  width: 100%;
  // 导航条
  .navOther {
    background: rgb(251, 248, 241);
    position: relative;
    border-bottom: 2px solid rgb(79, 150, 156);
  }
  .navHome {
    border-top: 5px solid #4f969c;
    background-image: linear-gradient(to bottom, #454647a8, #fff0);
  }
  .header-layout {
    display: flex;
    justify-content: space-between;
    height: 60px;
    .left-logo {
      margin: 5px 33px 52px;
    }
    .left-logo-other {
      margin: 9px 33px 52px;
    }
    .right-nav {
      display: flex;
      font-size: 1.1rem;
      .itemtext {
        color: #6d7b7d;
      }
      .hometext {
        color: #fff;
      }

      .el-menu-demo {
        border: 0;
        background: rgba(255, 255, 255, 0);
        .el-menu-item:not(.is-active):hover {
          color: #fff;
          font-weight: normal;
          background: url("../../../assets/imgs/nav-hover.jpg") no-repeat !important;
        }
        .el-menu-item.is-active {
          background: url("../../../assets/imgs/nav-hover.jpg") no-repeat;
          border: 0;
          color: #fff;
          background-size: cover;
        }
      }
      .right-icon {
        width: 195px;
        display: flex;
        margin-left: 14px;

        .el-icon-search {
          &:hover {
            color: #b6bfc0 !important;
          }
          cursor: pointer;
          width: 21%;
          line-height: 60px;
          height: 60px;
          color: #fff;
          text-align: center;
        }
        .icon-login {
          width: 60%;
          line-height: 60px;
          height: 60px;
          color: #fff;
          text-align: center;
          display: flex;
          justify-content: center;
          align-items: center;

          .username-box {
            min-width:100px;
            margin-left: 10px;
            display: flex;
            align-items: center;
            justify-content: space-around;
            font-size: 0.2rem;
            cursor: pointer;
            .exit {
              transform: translateX(10px) !important;
            }
          }
          .loginA {
            color: #fff;
          }
          .loginB {
            color: #6d7b7d !important;
          }
          .el-icon-s-custom {
            width: 60%;
            cursor: pointer;
          }
          p {
            height: 100%;
            margin: 0;
            cursor: pointer;
            font-size: 0.8rem;
            overflow: hidden;
          }
        }
      }
    }
  }
}
</style>

